<!DOCTYPE html>
<html lang="en">
<head>
    <base href="${request.contextPath}/"/>
    <meta charset="utf-8">
    <title>中国</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #map {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .click_mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            /*background-color: red;*/
            opacity: 0.5;
            z-index: 5;
        }

        .select_year {
            display: none;
        }
    </style>
</head>
<script src="source/jquery17.js"></script>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->

<div id="map"></div>


<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script src="source/echarts.js"></script>
<script src="source/data2.js"></script>
<script type="text/javascript">
    var myChart;

    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    option = {
        backgroundColor: '#0A238E',
        color: ['gold', 'aqua', 'lime'],
        title: {
            show: true,
            text: ' ',
            x: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        legend: {
            show: false,
            orient: 'vertical',
            x: 'left',
            data: ['北京 Top10', '上海 Top10', '广州 Top10'],
            selectedMode: 'single',
            selected: {
                '上海 Top10': false,
                '广州 Top10': false
            },
            textStyle: {
                color: '#fff'
            }
        },
        //下面的色值条
        dataRange: {
            min: 0,
            max: 100,
            calculable: false,
            color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                name: 'heilongjiang',
                type: 'map',
                roam: false,//鼠标滑轮
                hoverable: false,
                mapType: '黑龙江',
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(100,149,237,1)',
                        borderWidth: 0.5,
                        // 地图颜色
                        areaStyle: {
                            color: '#0B40A6'
                        }
                    }
                },

                itemStyle: {
                    //正常颜色
                    normal: {

                        areaStyle: {
                            color: '#0B40A6'
                        },

                        borderWidth: 0.5,//区域边框宽度
                        borderColor: 'rgba(100,149,237,1)',//区域边框颜色
                        areaColor: "#1b1b1b",//区域颜色
                    },
                    //悬浮颜色
                    emphasis: {
                        borderWidth: 0.5,
                        borderColor: 'rgba(100,149,237,1)',//区域边框颜色
                        color: '#0B40A6   ',
                    }
                },
                data: [
                    {name: '黑河市', selected: true,},
                    {name: '齐齐哈尔市', selected: true,},
                    {name: '绥化市', selected: true,},
                    {name: '哈尔滨市', selected: true,},

                ],
                markLine: {

                    smooth: true,
                    symbol: ['none', 'circle'],
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            borderWidth: 1,
                            borderColor: 'rgba(30,144,255,0.5)'
                        }
                    },
                    data: [],
                },
                geoCoord: {

                    '哈尔滨': [127.9690, 45.368],
                    '齐齐哈尔': [123.97, 47.33],
                    '鹤岗': [130.3, 47.33],
                    '双鸭山': [131.17, 46.65],
                    '鸡西': [130.97, 45.3],
                    '大庆': [125.03, 46.58],
                    '伊春': [128.92, 47.73],
                    '大兴安岭': [123.90, 52.22],
                    '黑河': [127.90, 49.22]


                }
            },
            {
                name: '北京 Top10',
                type: 'map',
                // mapType: 'china',
                mapType: '黑龙江',
                data: [],
                markLine: {
                    smooth: true,
                    effect: {
                        show: true,
                        scaleSize: 2,
                        period: 30,
                        color: '#fff',
                        shadowBlur: 10
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            lineStyle: {
                                type: 'solid',
                                shadowBlur: 10
                            }
                        }
                    },
                    data: [
                        [{name: '哈尔滨'}, {name: '齐齐哈尔'}],

                    ]
                },
                markPoint: {
                    symbol: 'emptyCircle',
                    symbolSize: function (v) {
                        return 10 + v / 10
                    },
                    effect: {
                        show: true,
                        shadowBlur: 0
                    },
                    itemStyle: {
                        normal: {
                            label: {show: false}
                        },
                        emphasis: {
                            label: {position: 'top'}
                        }
                    },
                    data: [
                        {name: '哈尔滨', value: 95},
                        {name: '齐齐哈尔', value: 90},
                        {name: '大连', value: 80},
                        {name: '南宁', value: 70},
                        {name: '南昌', value: 60},
                        {name: '拉萨', value: 100},
                        {name: '长春', value: 40},
                        {name: '包头', value: 30},
                        {name: '重庆', value: 20},
                        {name: '常州', value: 10}
                    ]
                }
            }
        ]
    };

    require.config({
        paths: {
            echarts: './source'
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意 保持按需加载结构定义图表路径
    var ecConfig;
    // alert(ecConfig);
    require(
        [
            'echarts',
            'echarts/chart/map'


        ],
        function (ec) {
            ecConfig = require('echarts/config');
            //为两个mapjs找容器
            myChart = ec.init(document.getElementById('map'));
            initData();
            loadAll(2014);
        }
    );

    function query() {

        var year = parseInt($("#year").val());
        loadAll(year);
    }

    function loadAll(year) {

        myChart.clear();
        var qrdata = h2.get(year);
        var qcdata = h3.get(year);
        option.series[1].markLine.data = [];

        for (var i = 0; i < qrdata.length; i++) {
            var obj = new Object();
            obj.name = qrdata[i].name;
            var obj1 = new Object();
            obj1.name = center;
            var arr = new Array();
            arr.push(obj);
            arr.push(obj1);
            option.series[1].markLine.data.push(arr);
        }
        option.series[1].markPoint.data = qrdata;
        option.title.text = "哈尔滨凌之讯农业互联网+流向图";


        myChart.setOption(option);
        myChart.on('click', function (params) {
            var city = params.name;
            console.log(params.name);
            var haerbin = ['https://baike.baidu.com/item/%E5%93%88%E5%B0%94%E6%BB%A8/177863?fr=aladdin'];
            var daqing = ['https://baike.baidu.com/item/%E5%A4%A7%E5%BA%86/138196'];
            var qiqihaer = ['https://baike.baidu.com/item/%E9%BD%90%E9%BD%90%E5%93%88%E5%B0%94'];

            if (params.name == '哈尔滨') {
                location.href = haerbin[0];
            }
            if (params.name == '大庆') {
                location.href = daqing[0];
            }
            if (params.name == '齐齐哈尔') {
                parent.nydsj();
            }

        });


    }

    var h1 = new Array();
    var h2 = new HashMap();
    var h3 = new HashMap();

    function initData() {
        for (var i = 0; i < qr.length; i++) {
            h2.put(qr[i].year, qr[i].data);
        }
        for (var i = 0; i < qc.length; i++) {
            h3.put(qc[i].year, qc[i].data);
        }
    }

    window.onresize = function () {
        myChart.resize();
    }
    // myChart.on('click', function (params) {
    //     var city = params.name;
    //     alert(city);
    // });

</script>
</body>
</html>